﻿
@{
    ViewBag.Title = "用户管理";
}
@section SideNav{@Html.Partial("SideNavPartialView")}
<ol class="breadcrumb">
    <li><span class="glyphicon glyphicon-home"></span>  @Html.ActionLink("首页", "Index", "Home")</li>
    <li class="active">@Html.ActionLink("用户管理", "Index", "User")</li>
</ol>
<div id="toolbar" class="btn-group" role="group">
    <button id="btn_add" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> 添加</button>
</div>
<table id="usergrid"></table>

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            //表格
            var $table = $('#usergrid');
            $table.bootstrapTable({
                toolbar: "#toolbar",
                showRefresh: true,
                showColumns: true,
                pagination: true,
                sidePagination: "server",
                pageList: "[5, 10, 20, 50, 100]",
                method: "post",
                url: "@Url.Action("PageList")",
                columns: [
                    { title: "state", checkbox: true },
                    { title: "ID", field: "UserID" },
                    { title: "角色", field: "RoleID", formatter: function (value, row, index) { return row.Role.Name; } },
                    {
                        title: "用户名", field: "Username", formatter: function (value, row, index) {
                            return "<a href='#' data-method='Modify' data-value=" + row.UserID + ">" + value + "（" + row.Name + "）</a>"
                        }
                    },
                    { title: "性别", field: "Sex" },
                    { title: "Email", field: "Email", visible: false },
                    { title: "最后登录时间", field: "LastLoginTime", formatter: function (value) { return moment(value).format("YYYY-MM-DD HH:mm:ss") } },
                    { title: "最后登录IP", field: "LastLoginIP", visible: false },
                    { title: "注册时间", field: "RegTime", visible: false, formatter: function (value) { return moment(value).format("YYYY-MM-DD HH:mm:ss") } },
                    {
                        title: "操作", field: "UserID", formatter: function (value) {
                            return "<a class='btn btn-sm btn-danger' data-method='Delete' data-value='" + value + "'>删除</a>"
                        }
                    }
                ],
                onAll: function (name, args) {
                    if ((name == "load-success.bs.table") || (name == "column-switch.bs.table")) {

                        //修改
                        $("a[data-method='Modify']").click(function () {
                            var id = $(this).attr("data-value");
                            var modifyDialog = new BootstrapDialog({
                                title: "<span class='glyphicon glyphicon-user'></span>修改用户",
                                message: function (dialog) {
                                    var $message = $('<div></div>');
                                    var pageToLoad = dialog.getData('pageToLoad');
                                    $message.load(pageToLoad);

                                    return $message;
                                },
                                data: {
                                    'pageToLoad': '@Url.Action("Modify")/' + id
                                },
                                buttons: [{
                                    icon: "glyphicon glyphicon-plus",
                                    label: "保存",
                                    action: function (dialogItself) {
                                        $.post($("form").attr("action"), $("form").serializeArray(), function (data) {
                                            if (data.Code == 1) {
                                                BootstrapDialog.show({
                                                    message: data.Message,
                                                    buttons: [{
                                                        icon: "glyphicon glyphicon-ok",
                                                        label: "确定",
                                                        action: function (dialogItself) {
                                                            $table.bootstrapTable("refresh");
                                                            dialogItself.close();
                                                            modifyDialog.close();
                                                        }
                                                    }]

                                                });
                                            }
                                            else BootstrapDialog.alert(data.Message);
                                        }, "json");
                                        $("form").validate();
                                    }
                                }, {
                                    icon: "glyphicon glyphicon-remove",
                                    label: "关闭",
                                    action: function (dialogItself) {
                                        dialogItself.close();
                                    }
                                }]
                            });
                            modifyDialog.open();
                        });
                        //修改结束

                        //删除按钮
                        $("a[data-method='Delete']").click(function () {
                            var id = $(this).attr("data-value");
                            BootstrapDialog.confirm("你确定要删除【" + $(this).parent().parent().find("td").eq(3).text() + "】吗？\n 建议尽可能不要删除用户。", function (result) {
                                if (result) {
                                    $.post("@Url.Action("Delete", "User")", { id: id }, function (data) {
                                        if (data.Code == 1) {
                                            BootstrapDialog.show({
                                                message: "删除用户成功",
                                                buttons: [{
                                                    icon: "glyphicon glyphicon-ok",
                                                    label: "确定",
                                                    action: function (dialogItself) {
                                                        $table.bootstrapTable("refresh");
                                                        dialogItself.close();
                                                    }
                                                }]

                                            });
                                        }
                                        else BootstrapDialog.alert(data.Message);
                                    }, "json");
                                }
                            });
                        });
                        //删除按钮结束
                    }
                }
            });
            //表格结束

            //添加
            $("#btn_add").click(function () {
                var addDialog = new BootstrapDialog({
                    title: "<span class='glyphicon glyphicon-plus'></span>添加用户",
                    message: function (dialog) {
                        var $message = $('<div></div>');
                        var pageToLoad = dialog.getData('pageToLoad');
                        $message.load(pageToLoad);

                        return $message;
                    },
                    data: {
                        'pageToLoad': '@Url.Action("Add")'
                    },
                    buttons: [{
                        icon: "glyphicon glyphicon-plus",
                        label: "添加",
                        action: function (dialogItself) {
                            if ($("form").valid()) {
                                $.post($("form").attr("action"), $("form").serializeArray(), function (data) {
                                    if (data.Code == 1) {
                                        BootstrapDialog.show({
                                            message: data.Message,
                                            buttons: [{
                                                icon: "glyphicon glyphicon-ok",
                                                label: "确定",
                                                action: function (dialogItself) {
                                                    $table.bootstrapTable("refresh");
                                                    dialogItself.close();
                                                    addDialog.close();
                                                }
                                            }]

                                        });
                                    }
                                    else BootstrapDialog.alert(data.Message);
                                }, "json");
                            }
                        }
                    }, {
                        icon: "glyphicon glyphicon-remove",
                        label: "关闭",
                        action: function (dialogItself) {
                            dialogItself.close();
                        }
                    }]
                });
                addDialog.open();
            });
            //添加结束
        });
    </script>
}
